<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务器详情页面</title>
    <script src="../layui/echarts.js"></script>
    <script src="../layui/jquery.min.js"></script>
    <style>
        div {
            width: 500px;
            height: 400px;
        }
    </style>

</head>
<body>
<div id="cpu"></div>
<div id="memory"></div>
<div id="disk"></div>
</body>
<script>
    $(document).ready(function(){
        myAjax();
    });
    var search = window.location.search;
    //获取到ip地址
    var serverIp = search.split("=")[1];

    //cpu指标数据
    var cpuChartDom = document.getElementById('cpu');
    var myCpuChart = echarts.init(cpuChartDom, 'dark');
    var optionCpu;
    //内存的指标数据
    var memoryChartDom = document.getElementById('memory');
    var myMemoryChart = echarts.init(memoryChartDom, 'dark');
    var optionMemory;
    //硬盘的指标数据
    var diskChartDom = document.getElementById('disk');
    var myDiskChart = echarts.init(diskChartDom, 'dark');
    var optionDisk;

    function myAjax() {
        let res = $.ajax({
            //请求方式
            type: "get",
            //请求的地址
            url: "/status/getServerByIp?serverIp=" + serverIp,
            async: false,
            dataType: "JSON",
            //成功后的回调函数
            success: function (returnData) {
                console.log("----------------------")
                console.log(returnData)
            },
            //错误回调函数
            error: function (x, t, e) {
                alert("错误：" + e);
            }
        });
        let returnData = res.responseJSON
        let cpuData = [];
        let memoryData = [];
        let diskData = [];
        for (let status of returnData) {
            let cpuUsage = {
                name: status.createTime,
                value: [
                    status.createTime,
                    status.cpuUsage
                ],
                ip: status.serverIp
            };
            let memoryUsage = {
                name: status.createTime,
                value: [
                    status.createTime,
                    status.memoryUsage
                ],
                ip: status.serverIp
            };
            let diskUsage = {
                name: status.createTime,
                value: [
                    status.createTime,
                    status.diskUsage
                ],
                ip: status.serverIp
            };
            cpuData.push(cpuUsage)
            memoryData.push(memoryUsage)
            diskData.push(diskUsage)
        }
        console.log(cpuData)
        return {"cpuData": cpuData, "memoryData": memoryData, "diskData": diskData};
    }

    optionCpu = {
        title: {
            text: 'cpu负载情况[' + myAjax().cpuData[0].ip + ']'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                return (
                    params.name +
                    ' : ' +
                    params.value[1]
                );
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [
            {
                name: 'Fake Data',
                type: 'line',
                showSymbol: false,
                data: myAjax().cpuData
            }
        ]
    };
    optionMemory = {
        title: {
            text: '内存使用情况%[' + myAjax().memoryData[0].ip + ']'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                return (
                    params.name +
                    ' : ' +
                    params.value[1] + '%'
                );
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [
            {
                name: 'Fake Data',
                type: 'line',
                showSymbol: false,
                data: myAjax().memoryData
            }
        ]
    };
    optionDisk = {
        title: {
            text: '磁盘使用情况%[' + myAjax().diskData[0].ip + ']'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                return (
                    params.name +
                    ' : ' +
                    params.value[1] + '%'
                );
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [
            {
                name: 'Fake Data',
                type: 'line',
                showSymbol: false,
                data: myAjax().diskData
            }
        ]
    };
    setInterval(function () {
        myCpuChart.setOption({
            series: [
                {
                    data: myAjax().cpuData
                }
            ]
        });
        myMemoryChart.setOption({
            series: [
                {
                    data: myAjax().memoryData
                }
            ]
        });
        myDiskChart.setOption({
            series: [
                {
                    data: myAjax().diskData
                }
            ]
        });

    }, 10000);
    myCpuChart.setOption(optionCpu);
    myMemoryChart.setOption(optionMemory);
    myDiskChart.setOption(optionDisk);
</script>
</html>
